<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 起手式, 100%保证我们的样式设置可以不受默认影响 */
        * {
            /* 消除网页的默认外边距 */
            margin: 0px;
            /* 消除网页的默认内边距 */
            padding: 0px;
            /* 去掉a标签的下划线 */
            text-decoration: none;

        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        .container .navbar {
            width: 100%;
            height: 50px;
            background-color: black;
            /* 给父级标签设置overflow，取消后续float带来的影响 */
            overflow: hidden;
        }

        .container .navbar a {
            /* 设置a标签是行内块元素，允许你设置宽度 */
            display: inline-block;
            /* 设置a标签的宽度,a标签默认行内元素，无法设置宽度 */
            width: 80px;
            /* 设置字体颜色 */
            color: white;
            /* 设置字体的大小 */
            font-size: large;
            /* 设置文字的高度和导航栏一样的高度 */
            line-height: 50px;
            /* 去掉a标签的下划线 */
            text-decoration: none;
            /* 设置a标签中的文字居中 */
            text-align: center;
        }

        /* 设置鼠标事件 */
        .container .navbar a:hover {
            background-color: green;
        }

        .container .navbar .login {
            float: right;
        }

        .container .center {
            margin: 10%;
            width: 80%;
        }

        .container .center .left div {
            text-align: center;
        }

        .container .center .right div {
            margin: 1em;
        }

        #userdesc {
            width: 100%;
            min-width: 50%;
            max-width: 100%;
            height: 10em;
            min-height: 5em;
            max-height: 10em;
        }

        .table table {
            width: 100%;
            text-align: center;
        }

        .table table td button {
            color: rgb(48, 98, 206);
            margin: 3px;
            padding: 3px;
            border: 0;
            border-radius: 3px;
            cursor: pointer;
            background-color: rgba(231, 35, 35, 0.909);
        }

        .table table td button:hover {
            color: white;
        }

        .table table caption {
            font-size: 2em;
            font-weight: bolder;
        }

        .table table thead tr {
            background-color: #008c8c;
            color: #fff;
        }

        .table table tbody tr:nth-child(odd) {
            background-color: #eee;
        }

        .table table tbody tr:hover {
            background-color: #ccc;
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 导航栏， 功能不实现-->
        <div class="navbar">
            <a href="/">首页</a>
            <a href="/all_questions">面试题</a>
            <a href="/all_questions4">基础题</a>
            <a href="#">讨论</a>
            <a href="#">求职</a>
            <a class="login" href="/login/user/{{NAME}}">{{NAME}}</a>
        </div>

        <div class="center">
            <div class="left">
                <img src="/img/test.jpg">
            </div>
            <div class="right">
                <div>
                    <h1>个人信息</h1>
                    <hr>
                    <div>
                        <p>用户名</p>
                        <input type="text" id="username">
                    </div>
                    <div>
                        <p>邮箱</p>
                        <input type="text" id="email">
                    </div>
                    <div>
                        <p>个人简介</p>
                        <textarea id="userdesc"></textarea>
                    </div>
                    <div style="text-align: center;">
                        <button type="button" id="update">更新信息</button>
                    </div>
                </div>
                <hr>
                <div>
                    <div>
                        <span>正确的题数:</span><span id="questions"></span>
                    </div>
                    <div class="table">
                        <table>
                            <thead>
                                <tr>
                                    <th>题号</th>
                                    <th>标题</th>
                                    <th>状态</th>
                                </tr>
                            </thead>
                            <tbody id="correctbody">
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script>
        $.ajaxSetup({
            beforeSend(xhr) {
                xhr.setRequestHeader("Authorization", sessionStorage.getItem("token"))
            }
        })

        $.ajax({
            type: "post",
            url: "/userinfo",
            dataType: "json",
            success: function (res) {

                if (res.status == -1) {
                    alert("请先登陆");
                    return;
                }
                sessionStorage.setItem("email", res.email);
                
                $("#username").val(res.username);
                $("#email").val(res.email);
                $("#userdesc").text(res.userdesc);
                $("#questions").text(res.count);

                $("#correctbody").empty();
                for (var i = 0; i < res.ques.length; i++) {
                    var tr = $("<tr id=\"ques_" + res.ques[i].number + "\"" + "></tr>");
                    tr.append("<td>" + res.ques[i].number + "</td>");
                    tr.append("<td>" + res.ques[i].title + "</td>");
                    tr.append("<td>√</td>")
                    $("#correctbody").append(tr);
                }

                
            }
        })

        function emailCheck() {
            var email = sessionStorage.getItem("email");
            if (username.length < 8 || username.length > 16) {
                alert("要求:账号长度为8-16位");
                return;
            }
            $.ajax({
                type: "post",
                url: "/getcheckid",
                data: { "email": email },
                dataType: "json",
                success: function (res) {
                    if (res.status == 0) {
                        var checkid = "";
                        console.log("checkid");
                        while (checkid.length != 6) checkid = prompt("获取验证码成功, 验证码5分钟内有效, 请输入6位验证码");
                        console.log(checkid);
                        if (checkid.length == 6) {
                            $.ajax({
                                type: "post",
                                url: "/checkid",
                                data: { "email": sessionStorage.getItem("email"), "checkid": checkid },
                                dataType: "json",
                                success: function (res) {
                                    if (res.status == 0) {
                                        var username = $("#username").val();
                                        var email = $("#email").val();
                                        var userdesc = $("#userdesc").val();
                                        $.ajax({
                                            type: "post",
                                            url: "/updateuser",
                                            data: { "username": username, "email": email, "userdesc": userdesc },
                                            dataType: "json",
                                            success: function (res) {
                                                if (res.status == 0) {
                                                    alert("更新成功");
                                                }
                                                else if (res.status == 1) {
                                                    alert("用户名或邮箱已存在");
                                                }
                                                else if (res.status == 2) {
                                                    alert("要求:账号长度为8-16位");
                                                }
                                                else if (res.status == 3) {
                                                    alert("不是正确的邮箱");
                                                }
                                                else {
                                                    alert("更新失败");
                                                }
                                            }
                                        })
                                    }
                                    else {
                                        alert("验证失败");
                                    }
                                },
                                error: function () {
                                    alert("验证失败");
                                }
                            })
                        }
                    }
                    else {
                        alert("获取验证码失败");
                    }
                },
                error: function () {
                    alert("获取验证码失败");
                }
            })
        }

        $("#update").click(function () {
            console.log(sessionStorage.getItem("email"));
            emailCheck();
        })
    </script>
</body>

</html>